ul {
  list-style: none;
}

body {
  width: 100vw;
  height: 100vh;
  line-height: 1.6;
  overflow: hidden;
  /* - 作用 ：禁止用户选择页面上的文本内容。
- 应用场景 ：常用于按钮、图标、导航栏等 UI 元素，防止用户在点击或拖动时意外选中文本，影响交互体验。 */
  user-select: none;
  /* 字体回退机制 */
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  /* - 作用 ：优化文本的可读性，使文字更加清晰易读。
- 工作原理 ：优先考虑文本的可读性，可能会启用字体的连字（ligatures）功能，调整字符间距和字距，使文本整体更加协调。
- 适用场景 ：常用于正文文本、标题等需要长时间阅读的内容，特别是在高分辨率屏幕上效果更明显。 */
  text-rendering: optimizeLegibility;
  /* - 作用 ：在 WebKit 内核浏览器（如 Chrome、Safari）中开启字体抗锯齿效果，使字体边缘更加平滑。
- 工作原理 ：通过平滑字体边缘的像素，减少锯齿状外观，使文字在屏幕上显示得更加清晰。
- 注意 ：这是一个非标准的 WebKit 私有属性，主要应用于 macOS 和 iOS 系统。 */
  -webkit-font-smoothing: antialiased;
  /* - 作用 ：在 Firefox 浏览器（特别是 macOS 系统上）优化字体渲染效果。
- 工作原理 ：通过将字体渲染为灰度抗锯齿，而不是彩色抗锯齿，使文本在 macOS 上显示得更加清晰锐利。
- 注意 ：这是 Firefox 的私有属性，仅在 macOS 系统上有效。 */
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  height: 100%;
}
